<!--
 * @Author: zhangyun
 * @Date: 2021-04-21 10:49:53
 * @LastEditors: zhangyun
 * @LastEditTime: 2021-04-28 10:39:46
 * @Desc: 
-->
<template>
  <div class="home py-4 px-20 flex justify-between">
    <article class="new_content flex-grow bg-white mr-4 rounded shadow">
      <NewsItem
        v-for="item of articleItems"
        :key="item._id"
        class="border-t"
        :id="item._id"
        :author="item.creator"
        :createTime="parseTime(item.time, 'yyyy/MM/dd')"
        :title="item.title"
        :description="item.detail"
      />
    </article>
    <aside class="other_content flex-none w-96">
      <Edit />
      <CreationCenter class="mt-4" :class="[createCenterFixed && 'fixed top-10']" />
    </aside>
  </div>
</template>

<script lang="ts">
import { defineComponent, getCurrentInstance, inject, nextTick, onMounted, reactive, ref } from 'vue'
import NewsItem from '../../components/NewsItem/index.vue'
import Edit from '../../components/Edit/index.vue'
import CreationCenter from '../../components/CreationCenter/index.vue'
import { parseTime } from '@utils/time.ts'
export default defineComponent({
  name: 'Home',
  components: { NewsItem, Edit, CreationCenter },
  setup() {
    const { createCenterFixed } = inject('commonProps') as any
    const { ctx } = getCurrentInstance() as any
    let articleItems = ref<Array<any>>([])
    onMounted(() => {
      getArticleList()
    })
    async function getArticleList() {
      const res = await ctx.$http.get('/api/article')
      articleItems.value = res.data
    }
    return {
      createCenterFixed,
      articleItems,
      parseTime,
    }
  },
})
</script>

<style></style>
